<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-icon{cursor: pointer;}
    .copy{margin-right: 3px;}

</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">短剧推广</a>
            <a><cite>投放账号管理</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">投放平台：</label>
                    <div id="pMedia" style="width:100%;flex:1"></div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">广告账户ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account_id" placeholder="请输入广告账户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">广告账户名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account_name" placeholder="请输入广告账户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">合作公司：</label>
                    <div id="pMenu" style="width:100%;flex:1"></div>
                </div>

                <!-- <div class="layui-inline">
                    <label class="layui-form-label w-auto">状态：</label>
                    <div class="layui-input-block">
                        <select name="status" id="status">
                            <option value="">请选择</option>
                            <option value="1">开启</option>
                            <option value="2">关闭</option>
                        </select>
                    </div>
                </div> -->

                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="link" lay-filter="link"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="batch_edit">批量修改</button>
            <button class="layui-btn layui-btn-sm" lay-event="sync">同步</button>
        </div>
    </script>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="detail">订单详情</a>
    </script>

    <script>
        let params = {
            elem: '#link'
            , toolbar: '#toolbarDemo'
            , url: '/cps/account/list' //数据接口
            , id: 'link'
            , page: true
            , limit:15
            , cols: [[ //表头
                { field: 'id', title: 'ID', width: 80, sort: true, align: 'center' }
                , { field: 'company_name', title: '合作公司', width: 260, align: 'center'}
                , { field: 'account_id', title: '广告账户ID', width: 200, align: 'center'}
                , { field: 'account_name', title: '账户名称', width: 260, align: 'center'}
                , { field: 'rebate', title: '返点', width: 100, align: 'center'}
                , {
                    title: '投放平台', width: 120, align: 'center', templet: function (d) {
                        return d.platform == 1 ? '抖音' : d.platform == 2 ? '快手' : d.platform == 3 ? '百度' : '内推'
                    }
                }
                , {
                    title: '状态', width: 100, align: 'center', templet: function (d) {
                        return d.status == 1 ? '开启' : '关闭'
                    }
                }
                , { field: 'subject', title: '账户主体', width: 160, align: 'center'}
                , {
                    field: 'created_at', title: '添加时间', width: 200, align: 'center', templet: function (d) {
                        return dayjsFormat(d.created_at)
                    }
                }
                , { toolbar: '#tbBar', title: '操作', align: 'center', fixed: 'right', width: 185 }

            ]]
        }
        tableList(params)

        let selectMedia = {
            url: '/cps/link/getLaunchMedia',
            selected: [],
            tips: '选择平台',
            name: 'platform',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMedia'
        }
        selectN(selectMedia)

        layui.use(['table', "layer"], function () {
            var table = layui.table;
            table.on('toolbar(link)', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    x_admin_show('添加', './info.html', 1100, 700);
                } else if (event === 'batch_edit') {
                    x_admin_show('批量修改', `./batch`, 700, 500);
                } else if (event == 'sync'){
                    var layerMask = layer.load(1, {shade: [0.4,'#000']});
                    Ajax('/cps/account/sync', {}).then(result => {
                        layer.close(layerMask)
                    });
                }
            });
            table.on('tool(link)', function (obj) {
                var event = obj.event;
                if (event === 'edit') {
                    x_admin_show('编辑', `./info.html?id=${obj.data.id}`, 1100, 700);
                } else if (event === 'detail') {
                    x_admin_show('订单详情', `./orderIndex?account_id=${obj.data.account_id}`, 1100, 700, null);
                }
            });
            table.on('edit(link)', function(obj){
                var field = obj.field //得到字段
                ,value = obj.value //得到修改后的值
                ,data = obj.data; //得到所在行所有键值
                var update = {};
                if(!isNaN(Number(value))){
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    let {video_id,video_detail_id,media_id,is_open,echo_rate,id,advertiser_id,link_switch} = data
                    Ajax('/cps/link/edit', { 
                        video_id,video_detail_id,media_id,is_open,echo_rate,id,advertiser_id,link_switch
                    }).then(result => {
                        table.reloadData('link')
                    });
                }else{
                    table.reloadData('linkList')
                    layer.msg('请输入数字', {
                        icon: 5
                    })
                }
            });
        });

        let selectParams = {
            url: '/cps/account/companySelectList',
            selected: [],
            tips: '选择合作公司',
            name: 'company_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu'
        }
        selectN(selectParams)
    </script>
</body>

</html>